import { useRef, useState, useEffect } from 'react';
import { loadDateAPI, addOneAPI, loadOneByAPI, modifyByIdAPI, deleteByIdAPI, deleteManyByIdsAPI } from './wz'
import { HighlightOutlined, PlusOutlined, RobotOutlined, } from '@ant-design/icons'
import { ModalForm, PageContainer, ProTable, ProFormText, ProForm } from '@ant-design/pro-components';
import { Space, Button, Popconfirm, } from 'antd'
import { dalImg } from '../../utils/tools'
import MyEditor from '../../components/myupload/MyEditor'

function Wzfl() {
  const [isShow, setIsShow] = useState(false)
  const [html, setHtml] = useState('')
  const actionRef = useRef()
  const [currentId, setCurrentId] = useState('')//记录当前ID，用来区分新增还是修改
  const [myForm] = ProForm.useForm()//获取表单
  const [selRows, setSelRows] = useState([])//选中的行ID
  useEffect(() => {
    //关闭窗口重置数据
    if (!isShow) {
      setCurrentId('')
    }
  }, [isShow])

  //当前数据列
  const columns = [
    {
      title: '序号',
      align: 'center',
      render(r, j, i) {
        return i + 1
      }
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '介绍',
      dataIndex: 'desc',
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
    },
    {
      title: '照片',
      render(v) {
        return <img className='d-t' src={dalImg(v.image)} />
      }
    },
    {
      title: '操作',
      render(v) {
        return <Space>
          <Button type='default' icon={<HighlightOutlined />} size='small' onClick={async () => {
            //获取数据
            const info = await loadOneByAPI(v.id)
            // console.log(info)
            myForm.setFieldValue(info.data)
            setIsShow(true)
            setCurrentId(v.id)//有了这个就能知道当前是新增还是修改
          }} ></Button>
          <Popconfirm title='是否确认删除？'
            onConfirm={async () => {
              await deleteByIdAPI(v.id)
              actionRef.current?.reload()
            }}>
            <Button type='default' danger icon={<RobotOutlined />} size='small'></Button>
          </Popconfirm>
        </Space>
      }
    },
  ]
  // const data = [
  //   // {
  //   // id: 1,
  //   // name: '大头',
  //   // gender: '男',
  //   // age: '18',
  //   // iphone: '133433533633',
  //   // photo: 'https://img0.baidu.com/it/u=157910949,3871554169&fm=253&fmt=auto&app=138&f=JPG?w=640&h=360',
  //   // position: 'wz',
  //   // }
  // ]
  return (
    //PageContainer整个页面布局容器
    <PageContainer>
      <ProTable
        // ProTable 这个属性可以直接操作表格中的各种方法
        rowKey="id"
        //批量删除
        rowSelection={{
          //删除之后想让已选择的项目消失
          selectedRowKeys: selRows,//下面设置点击删除之后清空

          onChange(selectedRowKeys) {
            // console.log(selectedRowKeys)
            setSelRows(selectedRowKeys)
          }
        }}

        actionRef={actionRef}
        columns={columns}
        //request是proTable里面很重要的api
        request={loadDateAPI}
        toolBarRender={() => {
          //新增
          //操作按钮数据，默认只有一个新增按钮
          const tools = [<Button type="primary" icon={<PlusOutlined />} key={1} onClick={() => {
            setIsShow(true)
          }} />]
          //如果勾选了指定的行，显示多行删除按钮
          if (selRows.length > 0) {
            tools.push(<Button type='primary' danger key={2} onClick={async () => {
              //通过join拼接数组
              await deleteManyByIdsAPI(selRows.join(','))
              actionRef.current?.reload()//删除之后重新加载数据
              setSelRows([])//清空选择的值
            }} >批量删除</Button>)
          }
          return tools

        }} />
      {/* 模态表单 */}
      {/* //表示模态框的属性 */}
      <ModalForm
        form={myForm}
        title='编辑'
        modalProps={{
          maskClosable: false,//点击遮罩层 不关闭
          destroyOnClose: true//再次点击输入框的内容消失
        }}
        open={isShow}
        onFinish={async (v) => {
          // console.log(v)
          //存在修改 不存在新增
          if (currentId) {
            await modifyByIdAPI(currentId, v)
          } else {
            await addOneAPI(v)//调接口取数据
          }


          setIsShow(false)
          actionRef.current?.reload()//重新加载数据
        }} onOpenChange={setIsShow}>

        <ProFormText label='姓名' placeholder='请输入姓名' name="name"
          rules={[
            {
              required: true,
              message: '名字不能为空'
            }
          ]}
        ></ProFormText>
        <ProFormText label='详情'>
          <MyEditor html={html} setHtml={setHtml} />
        </ProFormText>
        {/* <ProFormRadio.Group
          name="gender"
          label="性别"
          options={[
            {
              label: '男',
              value: '男',
            },
            {
              label: '女',
              value: '女',
            }
          ]}
        /> */}
      </ModalForm>
    </PageContainer>
  )

}

export default Wzfl;
